<template>
	<view class="nav_public" :style="[{height:!isTransparent?(statusBarHeight + navBarHeight)+'px':'0px'}]">
		<view class="nav_public_content" :style="[{background:background},{height:(statusBarHeight + navBarHeight)+'px'},{paddingTop:statusBarHeight + 'px'}]">
			<view class="nav_public_rela" :style="[{height:navBarHeight+'px'}]">
				<view class="nav_public_icon" :style="[{height:custom.height+'px'}]">
					<uni-icons type="back" size="20" :color="color" @click="$navBack()"></uni-icons>
					<view class="nav_public_line"></view>
					<uni-icons type="home" size="20" :color="color" @click="home"></uni-icons>
				</view>
				<view class="nav_public_tit" :style='"color:"+color'>{{title}}</view>
			</view>
		</view>
		<view class="plale"></view>
	</view>
</template>

<script>
	export default {
		name:"navPublic",
		props: {
			background: {
				type: String,
				default: '#F8F8FE'
			},
			title: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'black'
			},
			isTransparent: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				// 导航栏高度
				navBarHeight: 0,
				// 状态栏高度
				statusBarHeight: 0,
				custom: 0,//胶囊信息
			};
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			this.custom = custom;
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// #endif
		},
		methods: {
			home(){
				this.$navTo('/pages/mallHome/selfMall')
			}
		}
	}
</script>

<style lang="scss">
	.nav_public{
		// height: calc(var(--status-bar-height) + 120rpx)!important;
		overflow: hidden;
		.plale{
			height: 100%;
		}
		.nav_public_content{
			position: fixed;
			// padding-top: calc(var(--status-bar-height) + 52rpx);
			padding-left: 16rpx;
			width: 100%;
			padding-bottom: 26rpx;
			z-index: 999999;
			// height: calc(var(--status-bar-height) + 120rpx)!important;
		}
		.nav_public_rela{
			position: relative;
			display: flex;
			// justify-content: center;
			align-items: center;
		}
		.nav_public_tit{
			text-align: center;
			// padding-top: 6rpx;
			flex: 1;
			margin-left: -20rpx;
		}
		.nav_public_icon{
			display: flex;
			align-items: center;
			position: absolute;
			// top: 0;
			// left: 0;
			border: 1rpx solid #f1ebeb59;
			padding: 0 18rpx;
			border-radius: 50rpx;
			background: rgba(50,50,50,.3);
			.nav_public_line{
				width: 1rpx;
				height: 28rpx;
				background: #f1ebeb59;
				margin: 0 20rpx;
			}
		}
	}
</style>